<template>
  <el-tabs v-model="activeName" class="top" @tab-click="handleClick">
    <el-tab-pane label="押金管理" name="first">
      <div class="container">
        <el-card>
          <el-form inline>
            <el-form-item>
              <el-select v-model="value1" placeholder="商户">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                end-placeholder="开始日期"
                range-separator="至"
                start-placeholder="结束日期"
                type="datetimerange"
              />
            </el-form-item>
            <el-form-item>
              <el-select v-model="value1" placeholder="全部">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-button @click="btnEdit">查询</el-button>
            <!-- <el-form-item></el-form-item> -->
          </el-form>
          <div class="tm">收益概况</div>
          <div class="card">
            <el-card class="box">
              <div class="tille">今日新增押金(元)</div>
              <h1>0</h1>
            </el-card>
            <el-card class="box">
              <div class="tille">近日退还押金(元)</div>
              <h1>0</h1>
            </el-card>
            <el-card class="box">
              <div class="tille">本月累计押金(元)</div>
              <h1>0</h1>
            </el-card>
            <el-card class="box">
              <div class="tille">总押金(元)</div>
              <h1>0</h1>
            </el-card>
          </div>
          <div class="tm">押金增长</div>
          <div ref="myChart" :style="{ width: '100%', height: '400px' }"></div>
          <div class="tm">每日押金增长明细</div>
          <el-table>
            <el-table-column label="日期" />
            <el-table-column label="新增押金(元)" />
            <el-table-column label="新增人数" />
            <el-table-column label="总退押金(元)" />
            <el-table-column label="押金净增长(元)" />
          </el-table>
        </el-card>
      </div>
    </el-tab-pane>
    <!-- 押金明细页面 -->
    <el-tab-pane label="押金明细" name="second">
      <el-form inline>
        <el-form-item>
          <el-input placeholder="手机号" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="value1" placeholder="骑行区域">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="btnEdit">查询</el-button>
        <el-button @click="btnReset">重置</el-button>
        <el-table>
          <el-table-column label="时间" />
          <el-table-column label="手机号" />
          <el-table-column label="支付方式" />
          <el-table-column label="金额" />
        </el-table>
      </el-form>
      <el-pagination
        background
        :current-page="queryForm.pageNo"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <table-edit ref="edit" @fetch-data="fetchData" />
    </el-tab-pane>
    <el-tab-pane label="退款订单明细" name="third">
      <el-form inline>
        <el-form-item>
          <el-input placeholder="手机号" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="value1" placeholder="骑行区域">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="value1" placeholder="状态">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            end-placeholder="开始日期"
            range-separator="至"
            start-placeholder="结束日期"
            type="datetimerange"
          />
        </el-form-item>
        <el-form-item>
          <el-input placeholder="订单号" />
        </el-form-item>
        <el-button type="primary">查询</el-button>
        <el-button>重置</el-button>
      </el-form>
      <el-table>
        <el-table-column label="退款订单" />
        <el-table-column label="手机号" />
        <el-table-column label="退款金额" />
        <el-table-column label="发起时间" />
        <el-table-column label="到账时间" />
        <el-table-column label="所属区域" />
        <el-table-column label="是否成功" />
        <el-table-column label="失败原因" />
      </el-table>
      <el-pagination
        background
        :current-page="queryForm.pageNo"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <table-edit ref="edit" @fetch-data="fetchData" />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  import Vue from 'vue'
  const echarts = require('echarts')
  Vue.prototype.$echarts = echarts
  import { getList } from '@/api/table'
  export default {
    data() {
      return {
        options1: [
          { value: '选项1', label: '黄金糕' },
          { value: '选项2', label: '双皮奶' },
          { value: '选项3', label: '蚵仔煎' },
          { value: '选项4', label: '龙须面' },
          { value: '选项5', label: '北京烤鸭' },
        ],
        value1: '',
        activeName: 'first',
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        // 初始状态下跳转页面的数据
        queryForm: {
          pageNo: 1,
          pageSize: 20,
          title: '',
        },
      }
    },
    mounted() {
      this.drawLine()
      this.fetchData()
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event)
      },
      btnEdit() {},
      btnReset() {},
      drawLine() {
        let myChart = this.$echarts.init(this.$refs.myChart)
        myChart.setOption({
          xAxis: {
            data: ['时间1', '时间2', '时间3', '时间4', '时间5', '时间6'],
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
            },
          ],
        })
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      handleQuery() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await getList(this.queryForm)
        const { list, total } = data
        this.list = list
        const imageList = []
        list.forEach((item) => {
          imageList.push(item.img)
          this.total = total
          this.listLoading = false
        })
      },
    },
  }
</script>
<style scoped>
  .card {
    display: flex;
    justify-content: space-around;
  }
  .card .box {
    background: rgba(3, 134, 128, 0.1);
  }
  .tille {
    font-size: 24px;
  }
  h1 {
    text-align: center;
  }
  .tm {
    font-size: 16px;
    margin-bottom: 16px;
  }
  .top {
    padding: 20px;
  }
</style>
